<template>
  <!-- 体格检查情况分析 -->
  <div class="chart" id="main"></div>
</template>

<script>
import * as echarts from "echarts";
import { onMounted } from "vue";
export default {
  setup() {
    onMounted(() => {
      //需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("main"));
      let option = {
        title: {
          text: "合格率（%）",
        },
        xAxis: {
          axisLabel: {
            color: "white",
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#b7b7b7",
            },
          },
          type: "category",
          boundaryGap: false,
          data: ["外科", "内科", "耳鼻咽喉科", "眼科", "口腔科"],
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              color: "white",
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#b7b7b7",
              },
            },
          },
        ],
        series: [
          {
            data: [78, 69, 90, 87, 77],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        //自适应大小
        myChart.resize();
      };
    });
  },
  components: {},
  mounted() {},
};
</script>


<style scoped>
.chart {
  width: 100%;
  height: 90%;
}
</style>